@use '../public/pub-bem.scss' as *;

@use'vxe-table/styles/variable.scss' as *;

$common_border_color: #dadada;
$common_table_header_bg_color: #DCE4FB;
$common_table_header_font_color: #606266;
$common_table_row_hover_color: #e6f7ff;
$common_table_page_active_color: #4F78E4;

// ----- 修改样式变量
$vxe-font-size: 14px;
$vxe-font-color: #666;
$vxe-primary-color: #409eff;
$vxe-table-font-color: $vxe-font-color;
$vxe-table-border-color: $common_border_color;
$vxe-table-border-radius: 4px;

// ----- vxe-grid变量
$vxe-table-header-font-color: $common_table_header_font_color;
$vxe-table-header-background-color: $common_table_header_bg_color;
$vxe-table-footer-background-color: $common_table_header_bg_color;
$vxe-table-footer-font-color: $common_table_header_font_color;


// ----- modal样式
$vxe-modal-header-background-color: #e3f2fe;

// ----- pager

@import 'vxe-table/styles/modules.scss';

// ----- 表格扩展自定义样式
.rk-grid {
  @include b('grid') {
    .fn-inline {
      display: inline-block;
      font-style: normal;
      vertical-align: middle;
    }
    // &-header-cell {
    //   color: #606266;
    //   background-color: #DCE4FB;
    // }
  }
  @include b('grid-toolbar') {
    align-items: center;
    background: #fff;
    display: flex;
    height: 100%;
    &-title {
      display: flex;
      font-size: 0;
      &__span {
        background: #dce4fb;
        color: #2e3133;
        font-size: 16px;
        height: 32px;
        line-height: 32px;
        padding: 0 16px;
        position: relative;
        text-align: left;
      }
      &__i {
        border: 16px solid transparent;
        border-left: 20px solid #dce4fb;
        height: 1px;
        width: 1px;
      }
    }
    &-left {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
    }
    &-right {
      align-items: center;
      display: flex;
      flex: 1;
      justify-content: flex-end;
      .toolbar-right-slot {
        align-items: center;
        display: flex;
        // flex-wrap: wrap;
        justify-content: right;
        margin-right: 12px;
      }
      .toolbar-right-button {
        display: flex;
        flex-direction: row-reverse;
      }
    }
    // .vxe-tools--wrapper {
    //   margin-right: 12px;
    // }
  }
}

// ----- 表格复选框样式
.rk-grid {
  .vxe-table--filter-option .vxe-checkbox--icon,
  .vxe-export--panel-column-option .vxe-checkbox--icon,
  .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon,
  .vxe-custom--option .vxe-checkbox--icon,
  .vxe-checkbox .vxe-checkbox--icon {
    color: $common_border_color;
  }
  .is--checked.vxe-table--filter-option .vxe-checkbox--icon,
  .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
  .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
  .is--checked.vxe-custom--option .vxe-checkbox--icon,
  .is--checked.vxe-checkbox .vxe-checkbox--icon,
  .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
  .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
  .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,
  .is--indeterminate.vxe-custom--option .vxe-checkbox--icon,
  .is--indeterminate.vxe-checkbox .vxe-checkbox--icon {
    color: #409eff;
  }
}

// ----- 表格行
.rk-grid {
  .vxe-table--render-default {
    .vxe-body--row.row--hover {
      background-color: $common_table_row_hover_color;
      &.row--stripe {
        background-color: $common_table_row_hover_color;
      }
    }
  }
}
// ----- 弹窗扩展自定义样式
.rk-modal {
  .vxe-modal--box {
    border-radius: unset;
  }
  .vxe-modal--header {
    overflow: hidden;
    border-radius: unset;
    .vxe-modal--header-title {
      font-size: 18px;
      font-weight: normal;
    }
    .vxe-modal--header-right {
      padding: .8em 1em .6em 0;
    }
  }
}

// ----- vxe-pager自定义样式
.rk-grid {
  .vxe-pager {
    .vxe-pager--jump-next,
    .vxe-pager--jump-prev,
    .vxe-pager--next-btn,
    .vxe-pager--num-btn,
    .vxe-pager--prev-btn {
      &:not(.is--disabled) {
        &:focus, &.is--active {
          color: #fff;
          background-color: #4F78E4;
        }
      }
    }
    &.is--background {
      .vxe-pager--num-btn {
        &:not(.is--disabled) {
          &.is--active {
            &:hover {
              background-color: $common_table_page_active_color
            }
          }
        }
      }
    }
  }
}
